<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <input type="button" value="printWindowArg" onclick="printWindowArg( msg )">
    <script>
        let msg = "测试数据"
        function printWindowArg(arg){
            console.log(arg)
            console.log(msg)
        }
    </script>
    <hr>
    <div id="app">
        <!-- 
            指令的语法
                布尔类型指令： v-指令名
                带取值的指令： v-指令名 = " 表达式 "
                带参数的指令： v-指令名:参数 = "表达式"
        -->
        <p>v-on指令和v-bind指令都是为标签DOM对象完成特殊属性绑定操作的</p>
        <h5>v-on:用于为元素进行动态事件绑定操作</h5>
        <p>事件指令的绑定通过 v-on 的关键字 : 设定事件名</p>
        <p>v-on:eventName >>> eventName 是JS定义的基础事件名</p>
        <p>v-on 完成事件绑定时，取值可以是数据仓库方法变量，也可以是vue的方法仓库相关方法</p>
        <p>取值数据仓库方法和取值方法仓库方法区别：在虚拟DOM更新时数据仓库的方法变量会多次渲染页面【虚拟DOM时详细讲解】</p>
        <p>v-on对标签进行的事件绑定，和常规JS的使用规则没有太大的变化，只是在特殊参数处理上存储细微调整</p>
        <input type="button" value="click-取值数据仓库方法" v-on:click=" printTest() ">
        <br>
        <input type="button" value="click-取值方法仓库方法" v-on:click=" printInfo() ">
        <br>
        <input type="button" value="更新printTest变量" v-on:click="changePrintTest()">
        <br>
        <input type="button" value="更新printInfo变量" v-on:click="changePrintInfo()">
        <br>
        <input type="button" value="方法参数" v-on:click="printArg('字符串参数',1234,false,[1,2,3],{name:'tom'})">
        <br>
        <!-- 
            传统操作：页面this >> 事件对应的DOM对象
            vue操作：页面this >> vue的实例对象

            传统操作：页面参数event >> 事件触发的事件源信息对象
             vue操作：页面参数event >> undefined  >> vue认为 event 是仓库中的一个数据变量
                      页面参数$event >> 事件触发的事件源信息对象  >> vue提供重定义的特殊关键字，用于指代事件源对象
        -->
        <input type="button" value="方法参数-页面this" v-on:click="printArg( this )">
        <br>
        <input type="button" value="方法参数-页面event" v-on:click="printArg( event,$event )">
        <br>
        <input type="button" value="方法参数-仓库变量" v-on:click="printArg( msg )">
        <br>
        <input type="button" value="方法参数-参数运算" v-on:click="printArg( msg+'-end' )">
        
        <h5>v-bind:用于为元素动态绑定DOM属性和HTML属性的</h5>
        <p>属性指令的绑定通过 v-bind 的关键字 : 设定属性名</p>
        <p>v-bind指令取值等效于插值表达式，v-bind用于对DOM的属性进行操作</p>
        <p>v-bind指令同样具有响应式功能特性</p>
        <div class="box" v-bind:style=" `background-color:${color}` ">{{ color }}</div>
        <input type="color" v-on:change="getColor( $event.target.value )">
        <input type="color" v-on:input="getColor( $event.target.value )">

    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    msg:"测试数据",
                    printTest:function(){
                        console.log("printTest")
                    },
                    color:"#000000"
                }
            },
            methods:{
                printInfo(){
                    console.log("printInfo")
                },
                changePrintTest(){
                    this.printTest = null;
                },
                changePrintInfo(){
                    this.printInfo = null;
                },
                printArg(...args){
                    console.log(args)
                },
                getColor(color){
                    console.log("colorDom的选中颜色:",color)
                    this.color = color;
                }
            }
        }).mount("#app")
    </script>
</body>
</html>